import React from 'react'
import { Col, Pagination, Row } from 'antd'

import { connect } from 'react-redux'
import SerialBox from './common/serial-box'
import NavMenu from './common/nav-menu'
import { getSerialPageable } from '../actions/serial'

class MoreSerialsBody extends React.Component {
  state = {
    current: 1
  }
  componentDidMount = () => {
    this.props.getSerialPageable()
  }
  paginationChange = current => {
    this.setState({current},()=>{
      this.props.getSerialPageable(current)
    })
  }
  render () {
    const {serialPageable} = this.props
    const serials = serialPageable.content

    return <div>
      <NavMenu />
      <Row type='flex' gutter={40}>
        {
          serials.map(serial => {
            return <Col span={6} className='margin-b-3'>
              <SerialBox serial={serial} />
            </Col>
          })
        }
      </Row>
      <Pagination defaultCurrent={1} total={serialPageable.totalElements}
                  hideOnSinglePage
                  defaultPageSize={12}
                  onChange={this.paginationChange}
                  className='pagination-center' />
    </div>
  }
}

const mapStateToProps = ({serialPageable}) => ({serialPageable})
const mapDispatchToProps = dispatch => ({
  getSerialPageable: current => dispatch(getSerialPageable(current))
})
export default connect(mapStateToProps, mapDispatchToProps)(MoreSerialsBody)
